Copper.TaskBubble = function(config) {
    var currentTaskRadius = Copper.Global.currentTaskRadius;
    var taskRadius = Copper.Global.taskRadius;
    var globalCenterX = Copper.Global.centerX;
    var globalCenterY = Copper.Global.centerY;
    
    //config.startAngle = Copper.Util.convertTimeToAngle(config.startTime);
    //config.endAngle = Copper.Util.convertTimeToAngle(config.endTime);
    

    config.drawFunc = function() {     
        //console.log('enter task bubble draw func');
        var context = this.getContext();                                     
        var taskCenter = this.getCenter();
        context.beginPath();
        
        //draw arrow
        context.save();
        context.translate(taskCenter[2], taskCenter[3]);
        context.moveTo(0,0);
        context.rotate(this.getCenterAngle());         
        context.lineTo(0 + Math.sin(Math.PI / 3) * 30, 0 - 15);
        context.lineTo(0 + Math.sin(Math.PI / 3) * 30, 0 + 15);
        context.lineTo(0, 0);      
        context.restore();    
        
        if(this.isSelected){   
            context.fillStyle = 'white';
            context.arc(taskCenter[0], taskCenter[1], currentTaskRadius, 0, Math.PI*2, false);
            context.closePath();
            context.fill();
            
            context.strokeStyle = '#00bce2';
            context.beginPath();
            context.arc(taskCenter[0], taskCenter[1], currentTaskRadius - 10, 0, Math.PI*2, false);
            context.closePath();
            context.stroke();
            if(this.task && this.task.isEditing){
                context.fillStyle = 'rgb(136,249,205)';
            } else {
                context.fillStyle = 'rgba(255,255,255,0.85)';
            }
            context.beginPath();
            context.arc(taskCenter[0], taskCenter[1], currentTaskRadius - 11, 0, Math.PI*2, false);
            context.closePath();
            context.fill();
            
            context.fillStyle = 'black';
            context.font = "32px Segoe UI Light";
            context.fillText(this.title, taskCenter[0]- taskRadius - 20, taskCenter[1]-24);
            context.fillStyle = '#858585';
            context.font = "16px Segoe UI Light";
            
            var tmpStr = '';
            var content = this.content;
            var lineNo = 0;

            for(var i = 0; i < content.length && lineNo < 4; ++i){
                if(context.measureText(tmpStr).width < 210){
                    tmpStr += content[i];       
                } else {
                    context.fillText(tmpStr, taskCenter[0] - taskRadius - 30, taskCenter[1] + 10 + lineNo++ * 20);
                    tmpStr = content[i];
                }
            }
            if (lineNo < 4) {
                context.fillText(tmpStr, taskCenter[0] - Copper.Global.taskRadius - 30, taskCenter[1] + 10 + lineNo++ * 20);
            }

        } else {
            context.fillStyle = 'rgba(0,0,0,0.2)';
            context.arc(taskCenter[0], taskCenter[1], Copper.Global.taskRadius, 0, Math.PI*2, false);
            context.closePath();
            context.fill();
            context.fillStyle = 'black';
            context.font = "18px Segoe UI Light";
            context.fillText(this.title, taskCenter[0]-Copper.Global.taskRadius+20, taskCenter[1]-10);
            context.fillStyle = '#858585';
            context.font = "16px Segoe UI Light";

            var tmpStr = '';
            var content = this.content;    
            
            var lineNo = 0;
            for(var i = 0; i < content.length && lineNo < 2; ++i){
                if(context.measureText(tmpStr).width < 100){
                    tmpStr += content[i];       
                } else {
                    context.fillText(tmpStr, taskCenter[0] - Copper.Global.taskRadius + 20, taskCenter[1] + 10 + lineNo++ * 20);
                    tmpStr = content[i];
                }
            } 
            //context.fillText(tmpStr, taskCenter[0] - Copper.Global.taskRadius + 20, taskCenter[1] + 10 + lineNo++ * 20);
        }
    };
    
    this.isSelected = config.isSelected? true: false;
    //this.taskId = config.taskId;
    
    // call super constructor
    Kinetic.Shape.apply(this, [config]);
};
/*
 * Star methods
 */
Copper.TaskBubble.prototype = {
    getCenterAngle: function(){
        var v = (this.startAngle + this.endAngle) / 2;
        if(this.endAngle < this.startAngle){
            v = (Math.PI + v) % (Math.PI * 2);
        }
        return v;
    },
    
    getCenter: function(){
        var v = this.getCenterAngle();
        var x, y;
        var d = Copper.Global.bgRadius;          
        var r = Copper.Global.clockBorderRadius + 2; 
        if(!this.isSelected){   
            //r = Copper.Global.bgRadius - 75 - Math.sin(Math.PI / 3) * Copper.Global.taskArrowWidth + 3;
            d -= Copper.Global.currentTaskRadius - Copper.Global.taskRadius;
        }    
        if(v >= Math.PI * 1.5 && v < Math.PI * 2){
            v = Math.PI * 2 - v;
            x = Copper.Global.centerX + Math.cos(v) * d;
            y = Copper.Global.centerY - Math.sin(v) * d; 
            x0 = Copper.Global.centerX + Math.cos(v) * r ;
            y0 = Copper.Global.centerY - Math.sin(v) * r;  
        } else if(v <= 0.5 * Math.PI){
            x = Copper.Global.centerX + Math.cos(v) * d;
            y = Copper.Global.centerY + Math.sin(v) * d; 
            x0 = Copper.Global.centerX + Math.cos(v) * r;
            y0 = Copper.Global.centerY + Math.sin(v) * r;            
        } else if(v <= Math.PI){
            v = Math.PI - v;
            x = Copper.Global.centerX - Math.cos(v) * d;
            y = Copper.Global.centerY + Math.sin(v) * d; 
            x0 = Copper.Global.centerX - Math.cos(v) * r;
            y0 = Copper.Global.centerY + Math.sin(v) * r; 
        } else {
            v = v - Math.PI;
            x = Copper.Global.centerX - Math.cos(v) * d;
            y = Copper.Global.centerY - Math.sin(v) * d;
            x0 = Copper.Global.centerX - Math.cos(v) * r;
            y0 = Copper.Global.centerY - Math.sin(v) * r;
        }
        //alert([angle, x , y])
        return [x, y,x0,y0];  
    },
    
    setStartAngle: function(startAngle){
        this.startAngle = startAngle;
        if(this.endAngle && this.endAngle < this.startAngle){
            this.endAngle += Math.PI * 2;
        }
    },
    
    setEndAngle: function(endAngle){
        this.endAngle = endAngle;
        if(this.endAngle && this.endAngle < this.startAngle){
            this.endAngle += Math.PI * 2;
        }
    },
    
    setContent: function(content){
        this.content = content;
    },
    
    setTitle: function(title){
        this.title = title;
    },
    
    toggle: function(){
        this.isSelected = !this.isSelected;
    }
};
// extend Shape
Kinetic.GlobalObject.extend(Copper.TaskBubble, Kinetic.Shape);